<template>
  <el-container>
    <el-aside width="200">
      <h5 ref="h5"></h5>
      <el-menu :default-active="$route.path"
        class="el-menu-vertical-demo"
        text-color="#4e5bf8"
        ref="sideMenu"
        active-text-color="#E47833"
        :collapse="isCollapse">

        <qf-sub-menu :sideMenu='$store.state.sideMenu'>

        </qf-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <el-row type="flex"
          class="row-bg"
          justify="space-between">
          <el-col :span="6">
            <div class="grid-content left">
              <i :class="['iconfont',isCollapse?'icon-zhankai':'icon-shouqicaidan']"
                @click="isCollapse=!isCollapse"></i>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content middle">
              管理系统
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content right">
              
              <el-avatar size="large"
                :src="userInfo.headimgurl"></el-avatar>
              <b>欢迎您:
                <el-dropdown @command="command">
                  <span class="nickname">
                    {{userInfo.nickname}}
                    <i style="color:#fff"
                    class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu>
                    <el-dropdown-item icon="" command="/vipmanager">
                      vip充值
                    </el-dropdown-item>
                    <el-dropdown-item icon="" command="/vipmanager">
                      vip到期时间:{{userInfo.vipExpires}}
                    </el-dropdown-item>
                    
                    <el-dropdown-item  command="/users">
                      账号信息
                    </el-dropdown-item>
                    <el-dropdown-item command="/studentManager/product">
                      项目管理
                    </el-dropdown-item>
                    <el-dropdown-item  @click.native="exit">
                      <span>退出</span>
                      
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </b>
              
            </div>
          </el-col>
        </el-row>

      </el-header>
      <el-main>
        <el-breadcrumb separator=" > ">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{name:bread.name}" v-for="bread in $store.state.breadCrumb" :key=bread.name>
            {{bread.meta.name}}
          </el-breadcrumb-item>
         
        </el-breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import * as permissionApi from "../../api/permission";

export default {
  methods: {
    command(path){
      this.$router.push(path)
    },
    exit(){
      localStorage.clear()
      this.$router.push("/login")
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  data() {
    return {

      isCollapse: false,
      userInfo:{},
      
    };
  },
  mounted() {
    this.userInfo=JSON.parse(localStorage.getItem("crm-userInfo"))
    console.log(this.userInfo)
    
  },
  
};
</script>


<style  scoped lang="less">
.nickname{
  color:#fff;
  font-size: 16px;
  cursor: pointer;
}
.el-header,
.el-footer {
  background: linear-gradient(135deg, #4c67ff, #5635df);
  color: #333;
  text-align: center;
  
}
.el-main{
  .el-breadcrumb{
    margin-bottom: 20px;
  }
}
body > .el-container {
  margin-bottom: 40px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }

  .left {
    text-align: left;
    .icon-caidan {
      font-size: 30px;
      cursor: pointer;
    }
  }
  .right {
    
    span {
      vertical-align: middle;
    }
  }
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
  color: white;
}
.row-bg {
  padding: 10px 0;
}
.el-col {
  width: 200px;
}
h5 {
  height: 60px;
  font-size: 30px;
  color: #fff;
  transition: all 1s;
}
.el-aside {
  color: #333;
  text-align: center;
  background: linear-gradient(135deg, #4c67ff, #5635df);
  text-align: left;
  transition: all 1s;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
}
.icon-shouqicaidan,
.icon-zhankai {
  font-size: 50px;
}
</style>